<template>
    <div class="content">
        <div class="cover" v-if="detail.id">
            <u--image
                :src="detail.headerPicture"
                width="750rpx"
                height="334rpx"
                :lazy-load="true"
                mode="aspectFill"
            ></u--image>
            <div class="mask"></div>
            <div class="shop-info">
                <p class="name">{{ detail.name }}</p>
                <div class="address">
                    <p>{{ detail.address }}</p>
                    <p class="room">临近{{ detail.studyhallName }}</p>
                </div>
            </div>
            <div class="location" @click="toLocation">
                <img class="icon" src="@/static/images/room/location.png" />
                去这里
            </div>
        </div>
        <div class="hotel-list" v-if="roomsList.length > 0">
            <div
                class="hotel-item"
                v-for="item in roomsList"
                :key="item.id"
                @click="showRoomDetail(item)"
            >
                <u--image
                    :src="item.headerPicture"
                    width="180rpx"
                    height="180rpx"
                    radius="8rpx"
                    :lazy-load="true"
                    mode="aspectFill"
                ></u--image>
                <div class="right">
                    <div class="top">
                        <p class="name">{{ item.name }}</p>
                        <p class="desc">
                            {{ item.area }} {{ item.bedType }}
                            {{ item.hasWindow ? '有窗' : '无窗' }}
                            {{ item.independentToilet ? '独卫' : '公卫' }}
                            {{ item.remarks }}
                        </p>
                    </div>
                    <div class="footer">
                        <span class="price">{{ item.priceDescription }}</span>
                    </div>
                </div>
            </div>
        </div>
        <u-loadmore
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
            v-if="roomsList.length > 0"
        />
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无住宿推荐</p>
        </div>
        <u-popup :show="isShowShop" closeable :round="24" @close="isShowShop = false">
            <div class="shop-popup">
                <div class="title">
                    <img class="icon" src="@/static/images/common/home.png" />
                    {{ roomDetail.name }}
                </div>
                <u-swiper
                    :list="roomDetail.pictures"
                    indicator
                    height="422rpx"
                    indicatorMode="dot"
                    :radius="0"
                ></u-swiper>
                <div class="sub-item">
                    <span class="label">床型</span>
                    <span class="value">{{ roomDetail.bedType }}</span>
                </div>
                <div class="sub-item">
                    <span class="label">房间面积</span>
                    <span class="value">{{ roomDetail.area }}</span>
                </div>
                <div class="sub-item">
                    <span class="label">窗户</span>
                    <span class="value">{{ roomDetail.hasWindow ? '有窗' : '无窗' }}</span>
                </div>
                <div class="sub-item">
                    <span class="label">卫生间</span>
                    <span class="value">{{ roomDetail.independentToilet ? '独卫' : '公卫' }}</span>
                </div>
                <div class="sub-item">
                    <span class="label">人数</span>
                    <span class="value">{{ roomDetail.allowPersonNum }}人</span>
                </div>
                <div class="sub-item">
                    <span class="label">其他</span>
                    <span class="value">{{ roomDetail.remarks }}</span>
                </div>
            </div>
        </u-popup>
    </div>
</template>

<script>
export default {
    name: 'hotel',
    data() {
        return {
            id: null,
            detail: {},
            isShowShop: false,
            list: [],
            roomsList: [],
            roomDetail: {},
            empty: false,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        this.getHotelList();
    },
    methods: {
        toLocation() {
            uni.openLocation({
                longitude: this.detail.longitude,
                latitude: this.detail.latitude,
                name: this.detail.name,
                address: this.detail.address,
            });
        },
        getHotelList() {
            this.$Api.study.hotel
                .get({
                    id: this.id,
                })
                .then(res => {
                    if (!res.id) {
                        this.empty = true;
                        return false;
                    }
                    this.detail = res;
                    this.roomsList = res.rooms;
                });
        },
        showRoomDetail(item) {
            this.$Api.study.hotelRoom
                .get({
                    id: item.id,
                })
                .then(res => {
                    this.roomDetail = res;
                    this.isShowShop = true;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .cover {
        width: 100%;
        height: 334rpx;
        position: relative;
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #212121 100%);
        }
        .shop-info {
            position: absolute;
            z-index: 100;
            left: 50rpx;
            top: 76rpx;
            width: 500rpx;
            color: #fff;
            .name {
                font-size: 40rpx;
                font-weight: 600;
            }
            .address {
                font-size: 28rpx;
                margin-top: 14rpx;
                .room {
                    color: #fa6400;
                    font-size: 24rpx;
                    margin-top: 12rpx;
                }
            }
        }
        .location {
            font-size: 20rpx;
            color: #ffffff;
            position: absolute;
            z-index: 100;
            right: 56rpx;
            top: 130rpx;
            @include flexBox(center, center, column);
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 12rpx;
            }
        }
    }
    .hotel-list {
        width: 690rpx;
        margin: -70rpx auto 0;
        position: relative;
        .hotel-item {
            padding: 22rpx 24rpx;
            background: #fff;
            border-radius: 24rpx;
            margin-bottom: 20rpx;
            @include flexBox(space-between);
            .right {
                flex: 1;
                height: 180rpx;
                margin-left: 24rpx;
                @include flexBox(space-between, flex-start, column);
                .name {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    @include ellipsis(1);
                }
                .desc {
                    margin-top: 8rpx;
                    font-size: 24rpx;
                    color: #898989;
                }
                .footer {
                    width: 100%;
                    color: #fa6400;
                    @include flexBox(space-between, center);
                }
            }
        }
    }
}
.shop-popup {
    min-height: 54vh;
    max-height: 66vh;
    overflow-y: auto;
    padding: 40rpx 0 240rpx;
    .title {
        padding: 0 40rpx 12rpx;
        @include flexBox(flex-start, center);
        .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
    }
    .room-info {
        padding: 32rpx 40rpx;
        @include flexBox(space-between, center);
    }
    .sub-item {
        margin: 20rpx 40rpx;
        @include flexBox(flex-start, center);
        .label {
            font-size: 28rpx;
            color: #898989;
            width: 140rpx;
        }
        .value {
            font-size: 28rpx;
            color: #2f2f2f;
        }
    }
}
</style>
